<template>
	<div class="admin-mp">
		<div class="admin-mp_head">
			<div class="mp_head-txt">
				<div class="head-txt_icon">
					<i class="icon iconfont icon-5333-fenleyeezz"></i>
				</div>
				服务号
			</div>
			<div class="mp_head-search">
				<el-input placeholder="请输入服务号名称" v-model="searchText" class=" head-search-ipt input-with-select">
					<el-button slot="append" icon="el-icon-search" @click="searchApp"></el-button>
				</el-input>
			</div>
		</div>
		<div class="admin-mp_box">
			<div class="admin-mp_left" v-if="appMenus">
				<div class="admin-mp_li" :class="{'admin-mp_active':currentIndex==index}" v-for="(item,index) in appMenus" :key="index" @click="mpTab(item.type,index)">
					<div class="admin-mp_icon"><i class="icon  icon-5333-beifen"></i></div>
					{{item.name}}
				</div>
			</div>
			<div class="admin-mp_right" v-loading="vLoading">
				<ul class="mp_right-ul" v-if="appModels.length!=0">
					<li class="mp_right-li" v-for="(item,index) in appModels" :key="index" :style="`width: ${100/6}%;`" @click="mpTo(item)">
						<div class="mp_right-box">
							<div class="right-li-top">
								<div class="right-li-top-l">
									<x-image class="right-li-image" :src="item.icon"></x-image>
								</div>
								<div class="right-li-top-r">
									<p class="top-r_p1 top-r_p">{{item.name}}</p>
									<p class="top-r_p2 top-r_p">{{item.intro}}</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<zk-nodata v-else></zk-nodata>
			</div>
		</div>
	</div>
</template>
<script>
	import ala from '@/service/ala'
	import api from '@/service/api'
	export default {
		props: {
			widget: {}
		},
		data() {
			return {
				documentHeight: 0,
				appMenus: null,
				appModels: [],
				searchText: '',
				vLoading: false,
				currentIndex: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var h = document.documentElement.clientHeight || document.body.clientHeight
				this.documentHeight = h - 74
				this.appMenus = await api.appLeftMenu(this.widget.value.ids)
				this.mpTab(this.appMenus[0].type, 0)
			},
			async searchApp() {
				this.vLoading = true
				var response = await api.appAll(0, this.searchText, this.widget.value.ids)
				this.appModels = response.apps
				this.vLoading = false
			},
			mpTo(item) {
				this.$ala.localSet('alapc__admin_mp_adminLinks', item.adminLinks)
				this.$bus.$emit('admin_mp_menus', item.adminLinks)
				this.$router.push(item.adminLinks[0].url)
			},
			async mpTab(type, vIndex) {
				this.vLoading = true
				var response = await api.appAll(type, this.searchText, this.widget.value.ids)
				this.currentIndex = vIndex
				this.appModels = response.apps
				this.vLoading = false
			}
		}
	}
</script>
<style lang="scss">
	@import "var.scss";
</style>